<template>
    <el-container>
        <el-header style="text-align: center;height: auto">
            <h1>{{examDetail?.id}}、{{examDetail?.examName}}</h1>
            <!-- <el-form>
                <el-form-item label="参与人数">{{examDetail?.examRegisterUserList.length}}</el-form-item>
                <el-form-item label="总分">{{examDetail?.score}}</el-form-item>
                <el-form-item label="时间">{{examDetail?.beginTime}} - {{examDetail?.endTime}}</el-form-item>
            </el-form> -->
            <el-descriptions border title="基本信息" :column="2">
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon ><user /></el-icon>
                            参与人数
                        </div>
                    </template>
                    {{examDetail.examRegisterUserList?.length}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon><Timer /></el-icon>
                            时间：
                        </div>
                    </template>
                    {{examDetail?.beginTime}} - {{examDetail?.endTime}}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon><Cpu /></el-icon>
                            总时长：
                        </div>
                    </template>
                    {{examDetail?.validity}}分钟
                </el-descriptions-item>

                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon><Coin /></el-icon>
                            总分
                        </div>
                    </template>
                    {{examDetail?.score}}
                </el-descriptions-item>
            </el-descriptions>
        </el-header>

        <el-main>
            <div style="float: left;"><b>用户信息</b></div>
            <div style="float: right;">
                <el-button type="success" plain @click="autoJudge(examId)">自动阅卷</el-button>
                <el-button type="success" plain @click="async()=>{await getNeedPeopleProblemList(examId),showNeedPeopleProblem=true}">人工阅卷</el-button>
            </div>
            
            <el-table :data="examDetail?.examRegisterUserList">
                <el-table-column prop="userId" show-overflow-tooltip label="用户id" width="100" />
                <el-table-column prop="userName" show-overflow-tooltip label="用户昵称" width="150" />
                <el-table-column prop="score" show-overflow-tooltip label="得分" width="100" />
                <el-table-column prop="teacherComment" show-overflow-tooltip label="教师评语" width="280">
                    <template #default="scope">
                        <el-button @click="init(scope.$index)" type="primary" v-if="!showTeacherComment[scope.$index] && (!scope.row.teacherComment || scope.row.teacherComment?.length===0)">添加评论</el-button>
                        <el-button @click="init(scope.$index)" link v-else-if="!showTeacherComment[scope.$index]"><b>{{scope.row.teacherComment}}</b></el-button>
                        <el-input :rows="4" type="textarea" v-model="teacherComment.comment" @blur="handleBlur(scope.$index)" :ref="(e)=>{commentInputRef[scope.$index]=e}" v-show="showTeacherComment[scope.$index]"></el-input>
                    </template>

                </el-table-column>
                <el-table-column prop="aiComment" show-overflow-tooltip label="AI评语" width="280" />
                <el-table-column prop="status" show-overflow-tooltip label="状态" width="80">
                    <template #default="scope">
                        <el-dropdown placement="bottom-start">
                            <el-button link :type="mp[scope.row.status?scope.row.status:'1']"><b> {{getExamRegisterUserType(scope.row.status)}} </b></el-button>
                            <template #dropdown>
                                <el-dropdown-menu >
                                    <el-dropdown-item v-for="(index) in 5" :key="index" @click="updateStatus(index,scope.$index)">
                                        {{getExamRegisterUserType(index)}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="danger" plain @click="delRegisterUser(scope.row.id,examId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>



    <el-dialog v-model="showNeedPeopleProblem" width="1000px">
        <el-table :data="needProblemList">
            <el-table-column label="id" prop="id" style="width: 150px;"/>
            <el-table-column label="题目描述" show-overflow-tooltip prop="problemDescribe" />
            <el-table-column>
                <template #default="scope">
                    <el-button type="primary" @click="needPeopleJudgeStone.needProblemPeople=scope.row,$router.push(`/admin/exam/examPeopleJudge/${examId}/${scope.row.id}`)">进入判题</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>


<script setup lang="ts">
    import useExamDateAdmin from '@/hooks/admin/useExamDateAdmin';
    import { onMounted,ref } from 'vue';
    import useEnum from '@/base/useEnum'
    import { useNeedPeopleJudge } from '@/stone/needPeopleJudge';

    const {examDetail,teacherComment,commentInputRef,showTeacherComment,needProblemList,
        getNeedPeopleProblemList,autoJudge,delRegisterUser,updateStatus,init,getUserExamDetail,handleBlur}=useExamDateAdmin()
    const {getExamRegisterUserType}=useEnum()
    const props=defineProps(['examId'])
    const showNeedPeopleProblem=ref(false)
    const needPeopleJudgeStone= useNeedPeopleJudge()
    onMounted(()=>{
        getUserExamDetail(props.examId)
    })

    const mp={
        1:'primary',
        2:'success',
        3:'warning',
        4:'info',
        5:'danger'
    }



</script>


<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}

</style>